import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { connect } from 'react-redux'
import '../css/login.scss';
const FormItem = Form.Item;

class Login extends Component {
  componentDidMount(){
    
  }
  componentWillReceiveProps(prevProps){
  
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if(!err){
        if (values.username == 'admin' && values.password == 'admin') {
         this.props.SETLOGININFO({
           1:"2",
         })
         setTimeout(() => {
           console.log(this.props.loginInfo)
         }, 1000);
       
        }
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login">
        <div className="login-form">
          <div className="head-font">
            后台管理系统
          </div>
          <Form onSubmit={this.handleSubmit} >
            <FormItem>
              {getFieldDecorator('username', {
                rules: [{ required: true, message: '请输入用户名!' }],
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="用户名/邮箱"
                />,
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码!' }],
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="密码"
                />,
              )}
            </FormItem>
            <FormItem>
            <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(<Checkbox>记住密码</Checkbox>)}
              <a className="login-form-forgot" href="">
                忘记密码
              </a>
            </FormItem>
          </Form>
        </div>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    loginInfo: state.loginInfo
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    SETLOGININFO: (loginInfo) => {
      dispatch({ type: 'SETLOGININFO', loginInfo: loginInfo })
    }
  }
}

Login=connect(mapStateToProps, mapDispatchToProps)(Login)

export default Form.create()(Login);